<template>
  <el-container>
    <el-header>
      <!--头部的路由-->
      <headerdiv />
    </el-header>
    <!-- 内容部分 -->
    <el-main height="1500px" class="main">
      <!-- 轮播图 -->
      <div id="carousel">
        <!-- 设置图片大小   遍历数组 -->
        <el-carousel indicator-position="outside" height="800px">
          <el-carousel-item
            v-for="(item, key) in carousel_imgs"
            :key="'carousel_imgs' + key"
            style="text-align: center"
          >
            <el-image :src="item" fit="contain" style="width:100vw;height:100vh;"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 产品介绍 -->
      <div id="middle_top">
        <h2>解决各种场景的数据收集</h2>
        <p>活动、考试、测评、收款、问卷，我们为你提供完整的解决方案</p>
        <hr />
        <el-col :span="12">
          <el-card shadow="always" class="product">
            <span class="el-icon-arrow-right">文件调研</span>
            <p>
              31 种字段类型，帮助你设计各种类型的问卷调研。
              利用字段之间的逻辑跳转，整理更清晰的调研路径。专业的报表和数据导出，让你可以进一步分析样本价值。
            </p>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="product">
            <span class="el-icon-arrow-right">在线收款</span>
            <p>
              3 分钟快速搭建店铺，0
              手续费。货款支付，即刻到账。我们为你提供一整套基于信息收集的在线收款方案，解决知识付费、虚拟产品收款的各种问题。
            </p>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="product">
            <span class="el-icon-arrow-right">活动报名</span>
            <p>
              现在开始，不管是参与者招募、定向邀请、还是签到验票，在线抽奖，甚至是定制一套活动邀请函，所有的数据，都在同一平台。
            </p>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="product">
            <span class="el-icon-arrow-right">考试测评</span>
            <p>
              教育行业的领先效率的制胜法宝，在线考试、自动评分，适用于员工考核、学员测评，考试无需限定场所，随时随地掌握学习进度。
            </p>
          </el-card>
        </el-col>
      </div>
      <!-- 模板 -->
      <div id="middle_bottom">
        <h2>丰富的模板库，拿来即用</h2>
        <h3>
          活动报名、问卷调查、商品订单、考试测评等，我们为你提供丰富的模板库，覆盖各行业
        </h3>
        <el-carousel :interval="2000" type="card" height="600px">
          <el-carousel-item
            v-for="item in card_imgs"
            :key="item"
            style="text-align: center"
          >
            <el-image :src="item" fit="contain"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 文字内容部分 -->
      <div id="middle">
        <h2>相关推荐</h2>
        <!-- Card 卡片 效果 -->
        <div id="card" @click="JumpFunction">
          <el-col
            :span="8"
            v-for="(item, key) in listImgs"
            :key="'listImgs' + key"
          >
            <el-card shadow="hover">
              <el-image :src="item" class="imgs"></el-image>
            </el-card>
          </el-col>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
// 加载轮播图照片资源
import indexImg1 from "../../static/imgs/loading/00.jpg";
import indexImg3 from "../../static/imgs/loading/11.jpg";
import indexImg4 from "../../static/imgs/loading/22.jpg";
// 加载card照片资源  //
import cardImg1 from "../../static/imgs/loading/000.jpg";
import cardImg2 from "../../static/imgs/loading/111.jpg";
import cardImg3 from "../../static/imgs/loading/222.jpg";
// 加载功能照片资源   相关推荐
import listImg1 from "../../static/imgs/home/wj.jpg";
import listImg2 from "../../static/imgs/home/tp.gif";
import listImg3 from "../../static/imgs/home/bm.png";

export default {
  name: "home",
  data() {
    return {
      message: "",
      carousel_imgs: [indexImg1, indexImg3, indexImg4],
      card_imgs: [cardImg1, cardImg2, cardImg3],
      listImgs: [listImg1, listImg2, listImg3],
    };
  },
  methods: {
    // 跳转到指定的功能组件...
    JumpFunction() {
      this.$router.push({ path: "/questionnaire/edit" });
    },
  },
  components: {
    headerdiv: () => import(/** */ "../components/header"),
  },
};
</script>
<style scoped>
#carousel {
  /* border: 1px solid red; */
  padding: 0;
  margin: 0;
  margin-top: -15px;
}
#middle {
  text-align: center;
}
#middle > #card:hover {
  cursor: pointer;
}
#card {
  padding: 0 100px 0 100px;
}
#card_imgs {
  text-align: center;
}
p {
  color: black;
}
#middle_top {
  padding: 0 100px 0 100px;
  height: 600px;
}
.product {
  margin-top: 20px;
  margin-left: 10px;
  height: 200px;
  padding: 0 200px 0 200px;
}
.product:hover {
  cursor: pointer;
}
.product span {
  color: lightskyblue;
}
#middle_bottom {
  padding: 0 100px 0 100px;
  height: 700px;
  margin-top: 30px;
}
/* 相关推荐 */
.imgs {
  /* border: 1px solid red; */
  /* 设置相关推荐中的图片高度 */
  height: 378px;
}
</style>